<template>
    <div>
        <div class="header_search">
            <template v-if="!showInfo">
                <a-row :gutter="16" style="padding-top: 10px;">
                    <a-col span="16">
                        <a-row>
                            <a-col span="2">
                                <a-icon type="left-circle" theme="filled" style="font-size: 30px; color: #48D3A4;"
                                        @click="backMain"/>
                            </a-col>
                            <a-col span="20">
                                <a-input-search placeholder="" v-model="searchContent" @search="onSearch" allowClear>
                                    <a-select slot="addonBefore" :key="selectedType" :default-value="selectedType" style="width: 120px; font-size: 18px; border-radius: 0 0 50px 50px; padding-left: 5px;" @change="handleChange" >
                                        <a-select-option :value="1">
                                            姓名
                                        </a-select-option>
                                        <a-select-option :value="2">
                                            单位
                                        </a-select-option>
                                        <a-select-option :value="3">
                                            关键词
                                        </a-select-option>
                                    </a-select>
                                </a-input-search>
                            </a-col>
                        </a-row>
                        <br/>
                        <a-row :gutter="24">
                            <a-col span="4" style="color: rgba(0, 128, 128, 1); font-size: 20px; text-align: right; line-height: 35px;">专家姓名首字母</a-col>
                            <a-col span="20">
                                <div v-for="item in abcArr">
                                    <div style="float: left; width: 40px; font-weight: bold; line-height: 35px; cursor: pointer;"
                                         :class="selectedPinYin == item ? 'bigd' : 'def'"
                                         @click="changeTalentInfo(item)">
                                        {{item}}
                                    </div>
                                </div>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col span="4" style="color: rgba(0, 128, 128, 1); font-size: 20px; text-align: right; line-height: 30px;">研究领域</a-col>
                            <a-col span="20">
                                <a-checkbox-group @change="onChangeGwField" :value="fieldCheckedList">
                                    <a-row>
                                        <a-col v-for="item in fieldsArr" :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                                            <a-checkbox :value="item">
                                                <span style="font-size: 15px; line-height: 30px;">{{ item }}</span>
                                            </a-checkbox>
                                        </a-col>
                                    </a-row>
                                </a-checkbox-group>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col span="4" style="color: rgba(0, 128, 128, 1); font-size: 20px; text-align: right; line-height: 30px;">机构类型</a-col>
                            <a-col span="20">
                                <a-checkbox-group @change="onChangeDeptType" :value="deptTypeCheckedList" style="width: 100%;">
                                    <a-row>
                                        <a-col v-for="item in deptTypes" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                                            <a-checkbox :value="item">
                                                <span style="font-size: 15px; line-height: 30px;">{{ item.name }}</span>
                                            </a-checkbox>
                                        </a-col>
                                    </a-row>
                                </a-checkbox-group>
                            </a-col>
                        </a-row>
                        <!--                <a-row :gutter="24">-->
                        <!--                    <a-col span="4" style="color: rgba(0, 128, 128, 1); font-size: 25px; text-align: right;">成果类型</a-col>-->
                        <!--                    <a-col span="20">-->
                        <!--                        <a-checkbox-group @change="onChangeGwFruitType" style="width: 100%;" :value="fruitTypeCheckedList">-->
                        <!--                            <a-row>-->
                        <!--                                <a-col :span="3" v-for="item in fruitTypeArr">-->
                        <!--                                    <a-checkbox :value="item.type">-->
                        <!--                                        <span style="font-size: 15px; line-height: 40px;">{{ item.name }}</span>-->
                        <!--                                    </a-checkbox>-->
                        <!--                                </a-col>-->
                        <!--                            </a-row>-->
                        <!--                        </a-checkbox-group>-->
                        <!--                    </a-col>-->
                        <!--                </a-row>-->
                        <a-divider/>
                        <div>
                            <a-spin tip="数据加载中..." v-if="!isHaveDataTalent">
                                <div class="spin-content">
                                </div>
                            </a-spin>
                            <div v-if="isHaveDataTalent">
                                <template v-if="talentAllInfoList.length > 0">
                                    <a-row :gutter="24" style="min-height: 40px;">
                                        <template v-for="item in talentAllInfoList">
                                            <a-col span="8">
                                                <a-card style="border-radius: 10px; cursor: pointer;margin-bottom: 10px;height: 130px; background: linear-gradient(89.83deg, rgba(255,255,255,1) 1.05%,rgba(147,227,201,1) 82.48%,rgba(84,211,170,1) 100.35%);" size="small"
                                                        @click="toTalentInfo(item)">
                                                    <a-row>
                                                        <a-col span="10">
                                                            <a-avatar shape="square" :size="110"
                                                                      :src="item.talentPhoto != null ? item.talentPhoto : item.talentGender != null ? item.talentGender== '男' ? manPhoto : womanPhoto : unknownPhoto"/>
                                                        </a-col>
                                                        <a-col span="14">
                                                            <div style="padding-left: 5px;">
                                                                <a-row>
                                                                    <a-col span="20" style="color: rgba(3, 129, 129, 1); font-size: 25px; cursor: pointer; line-height: 30px; font-weight: bold;">{{item.talentRealName}}</a-col>
                                                                    <a-col span="4" style="line-height: 30px; font-size: 20px; " :title="item.talentPartPhoneNumber" v-if="item.talentPartPhoneNumber  != null "><a-icon type="phone" theme="twoTone" /></a-col>
                                                                </a-row>
                                                                <!--                                                    <a-row>-->
                                                                <!--                                                        <a-col span="24" style="line-height: 30px; font-size: 18px; font-weight: bold; color: #FD8024; text-align: left;">-->
                                                                <!--                                                            <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis" :title="item.field">{{item.field}}</div>-->
                                                                <!--                                                        </a-col>-->
                                                                <!--                                                    </a-row>-->
                                                                <!--                                                    <a-row v-if="item.talentPartPhoneNumber != null">-->
                                                                <!--                                                        <a-col span="24" style="padding-top: 5px;font-weight: bold;">-->
                                                                <!--                                                          <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis" :title="item.talentPartPhoneNumber">{{item.talentPartPhoneNumber}}</div>-->
                                                                <!--                                                        </a-col>-->
                                                                <!--                                                    </a-row>-->
                                                                <a-row v-if="item.talentCompany != null">
                                                                    <a-col span="24" style="padding-top: 5px;font-weight: bold;">
                                                                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis" :title="item.company">{{item.talentCompany}}</div>
                                                                    </a-col>
                                                                </a-row>
                                                                <a-row v-if="item.talentCooperationNum != null">
                                                                    <a-col span="24" style="padding-top: 5px;font-weight: bold;">合作次数：{{item.talentCooperationNum}}次</a-col>
                                                                </a-row>
                                                                <a-row style="padding-top: 5px;">
                                                                    <a-col span="24">
                                                                        <template v-for="(tag,index) in item.fieldNames">
                                                                            <a-tag :title="tag.tagName" v-if="index<3"
                                                                                   style="line-height: 20px; background: #64ccc4; borderStyle: dashed; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; float: left;">
                                                                                {{ tag.tagName }}
                                                                            </a-tag>
                                                                        </template>
                                                                    </a-col>
                                                                </a-row>
                                                            </div>
                                                        </a-col>
                                                    </a-row>
                                                </a-card>
                                            </a-col>
                                        </template>
                                    </a-row>
                                    <div class="pagCs">
                                        <a-pagination :pageSize="searchObj.pageSize" :current="talentCurrentPageNo"
                                                      :total="Math.min(talentAllInfoListTotal, searchObj.maxTotal)"
                                                      :show-total="total => `最多返回 ${total} 条`"
                                                      @change="onChangeTalentPage" />
                                    </div>
                                </template>
                                <div v-else>
                                    <a-empty style="padding-top: 10%;"/>
                                </div>
                            </div>
                        </div>

                    </a-col>
                    <a-col span="8">
                        <a-card title="专家信息AI检索">
                            <iframe :src="basePath + 'talent_chat/index.html'" style="height: 90vh; width: 100%; border: 0"></iframe>
                        </a-card>
                        <!--                    <div style="position: absolute; right: 10px; top: 20px;"><a-button type="primary" icon="message" @click="toChat">专家信息AI检索</a-button> </div>-->
                    </a-col>
                </a-row>
            </template>
            <template v-else>
                <ttcp-talent-info  :key="new Date().getTime()" :talentId="talentId" :talentName="talentName"  @toShowParent="showDiv"></ttcp-talent-info>
            </template>
        </div>

        <fruit-info ref="fruitInfo"></fruit-info>

        <div id="components-back-top-demo-custom">
            <a-back-top>
                <div class="ant-back-top-inner">
                    <a-icon type="up-circle" theme="filled" />
                </div>
            </a-back-top>
        </div>

        <a-drawer placement="right" width="800" :maskClosable="false" @close="showChatModal = false" :visible="showChatModal" title="专家信息AI检索">
            <iframe :src="basePath + 'talent_chat/index.html'" style="height: 80vh; width: 100%; border: 0"></iframe>
        </a-drawer>
    </div>

</template>

<script>

import fruitInfo from '../../FruitInfo.vue'
import ttcpTalentInfo from './TtcpTalentInfo.vue'
import {commonPostAction, postAction} from '@/api/esManage'
import { getBeforeMonth, etCurrentDate, getMonthFirstDay, getMonthLastDay, getCurrentDate } from '../../common/dateTool'
import photo from '../../common/photo.png'
import womanPhoto from "@/views/talentCooperation/common/womanPhoto.png";
import manPhoto from "@/views/talentCooperation/common/manPhoto.png";
import unknownPhoto from "@/views/talentCooperation/common/unknownPhoto.png";
import Setting from "@/setting";

export default {
    name: 'TalentFruit',
    props: {
    },
    components: {
        fruitInfo,
        ttcpTalentInfo
    },
    data() {
        return {
            basePath: Setting.talentChatPath,
            photo: photo,
            womanPhoto: womanPhoto,
            manPhoto: manPhoto,
            unknownPhoto: unknownPhoto,
            selectedType: 1,
            searchContent: "",
            searchObj:{
                current: 1,
                pageNo: 1,
                pageSize: 12,
                maxTotal: 200,
                sortField: "talentCooperationNum"
            },
            isHaveDataTalent: false,
            talentCurrentPageNo: 1,
            talentAllInfoList: [],
            talentAllInfoListTotal: 0,
            selectedBtnType: "",
            rangeValue: [],
            deptTypes: [
                { "name": "公司 / 企业", "description": "商业公司和其他营利性实体。"},
                { "name": "政府机构", "description": "国家和地方政府的行政、立法、司法机构。"},
                // { "name": "非政府组织 (NGO)", "description": "独立于政府控制的公益性组织。"},
                { "name": "教育机构", "description": "提供教育服务的学校、大学和研究机构。"},
                // { "name": "宗教组织", "description": "宗教团体或组织。"},
                // { "name": "军事组织", "description": "军队和国防相关组织。"},
                // { "name": "国际组织", "description": "跨越国界的多国或全球性机构。"},
                // { "name": "非盈利组织 (NPO)", "description": "不以营利为目的的机构，通常从事公益或慈善活动。"},
                { "name": "金融机构", "description": "从事银行、保险、证券等金融服务的组织。"},
                // { "name": "体育组织", "description": "从事体育竞技、赛事组织等相关的机构。"},
                { "name": "媒体机构", "description": "提供新闻、娱乐、广播、出版等信息服务的组织。"},
                { "name": "科技研究机构", "description": "从事科学研究与技术开发的实验室、研究所等。"},
                // { "name": "文化和艺术机构", "description": "从事文化、艺术相关的组织，如博物馆、剧院等。"},
                // { "name": "医疗机构", "description": "提供医疗和卫生服务的组织，包括医院、诊所等。"}
            ],
            deptTypeCheckedList:[],
            abcArr:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
            selectedPinYin: "",
            fieldsArr: ["碳达峰碳中和研究", "新型电力系统研究", "能源电力战略规划研究", "能源电力供需研究", "能源电力体制改革与电力市场研究", "能源电力数字经济研究",
                "企业战略规划研究", "企业经营与财务研究", "企业运营管理研究", "企业治理与风控合规研究", "品牌文化与社会责任研究", "数据、模型工具及实验室"],
            fieldCheckedList: [],
            fruitTypeArr: [{name: "学术论文", type: 6}, {name: "研究报告", type: 3}, {name: "活动成果", type: 4}, {name: "媒体成果", type: 5},
                {name: "图书出版", type: 7}, {name: "荣誉信息", type: 8}, {name: "专利成果", type: 11}, {name: "软著成果", type: 12}],
            fruitTypeCheckedList: [],
            showChatModal: false,
            showInfo: false,
            talentId: "",
            talentName: ""
        }
    },
    computed: {},
    created() {
    },
    methods: {
        handleChange(value) {
            this.selectedType = value;
        },
        showFruitInfo(item){
            this.$nextTick(()=>{
                this.$refs.fruitInfo.showModalInfo(item);
            })
        },
        toTalentInfo(item){
            // const routeUrl = this.$router.resolve({
            //     name: 'ttcpTalentInfo',
            //     query: {"t": item.id, 'c': item.talentRealName }
            // });
            // window.open(routeUrl.href, '_blank');

            this.talentId = item.id;
            this.talentName = item.talentRealName;
            this.showInfo = true;
        },
        addSearchContentLog(value){
            let url = "/operationLog/add";
            if(Setting.isMock) {
                window.localStorage.setItem('sysUserId', "1229");
                window.localStorage.setItem('realname', "李正正");
            }
            let userId = window.localStorage.getItem('sysUserId');
            let realName = window.localStorage.getItem('realname');
            commonPostAction(url, {content: value, userId: userId, userName: realName, searchType: this.selectedType}).then(res => {
                if (res.data.success) {
                }
            }).catch(err => {
                console.log(err)
            })
        },
        toSearch(value) {
            this.showPhotoPage = false;
            this.isHaveData = false;
            this.searchObj = JSON.parse(JSON.stringify(value));
            this.searchContent = this.searchObj.content;
            this.selectedType = this.searchObj.searchType;
            this.searchObj.maxTotal = 200;
            this.getData();
            this.addSearchContentLog(this.searchContent);
        },
        onSearch() {
            if(!this.searchContent){
                this.$message.error('请输入内容！')
                return;
            }
            this.currentPageNo = 1
            this.isHaveData = false;
            this.getData();
            this.addSearchContentLog(this.searchContent);
        },
        backMain() {
            this.searchObj = {
                current: 1,
                pageNo: 1,
                pageSize: 12,
                sortField: "talentCooperationNum"
            };
            this.$emit('changeShow', true, false, false, this.searchObj);
        },
        getData(){
            this.getAllTalentData();
        },
        getAllTalentData(){
            let url = "/talents/searchPageTalentData";
            this.searchObj.searchType = this.selectedType;
            this.searchObj.content = this.searchContent
            this.isHaveDataTalent = false;
            postAction(url, this.searchObj).then(res => {
                if (res.data.success) {
                    this.isHaveDataTalent = true;
                    if(res.data.result){
                        this.talentAllInfoListTotal = Math.min(parseInt(res.data.result.total), 200);
                        this.talentAllInfoList = res.data.result.records;
                        this.talentAllInfoList.forEach((talentInfo, index) => {
                            const foundTag = this.talentAllInfoList[index].tagList ? this.talentAllInfoList[index].tagList.find(
                                tag => tag.tagClassify === "talent_research_field"
                            ) : "";
                            if (foundTag) {
                                talentInfo.fieldNames = foundTag.tagNameList;
                            }
                        });
                    }
                }
            }).catch(err => {
                console.log(err)
                this.isHaveDataTalent = false;
            })
        },
        dataChange(date, dateString) {
            this.rangeValue = date;
            this.searchObj.pubStartDate = dateString[0];
            this.searchObj.pubEndDate = dateString[1];
            this.searchObj.current = 1;
            this.searchObj.pageNo = 1;
            this.currentPageNo = 1;
            this.getData();
        },
        setDateType(value){
            this.rangeValue = [];
            this.searchObj.pubStartDate = "";
            this.searchObj.pubEndDate = getCurrentDate();
            if(value === this.selectedBtnType){
                this.selectedBtnType = "";
            }else{
                this.selectedBtnType = value;

                this.searchObj.pubStartDate = getMonthFirstDay(getBeforeMonth(value * 12));
            }
            this.getData();
        },
        changeTalentInfo(item) {
            if(this.selectedPinYin == item){
                item = "";
            }
            this.selectedPinYin = item;
            this.searchObj.pinyin = item;
            this.searchObj.content = this.searchContent;
            this.onSearch();
        },
        onChangeGwField(checkedValues) {
            console.log('checked = ', checkedValues);
            this.fieldCheckedList = checkedValues;
            this.searchObj.gwFields = checkedValues;
            this.onSearch();
        },
        onChangeDeptType(checkedValues) {
            console.log('checked = ', checkedValues);
            this.deptTypeCheckedList = checkedValues;
            this.searchObj.deptTypes = checkedValues.map(item=> {return item.name});
            this.onSearch();
        },
        onChangeGwFruitType(checkedValues) {
            console.log('checked = ', checkedValues);
            this.fruitTypeCheckedList = checkedValues;
            this.searchObj.deptTypes = checkedValues;
            this.onSearch();
        },
        onChangeTalentPage(event) {
            // 重新赋值
            this.talentCurrentPageNo = event
            this.searchObj.current = event
            this.searchObj.pageNo = event
            this.onSearch();
        },
        toChat(){
            this.showChatModal = true;
        },
        showDiv(){
            this.showInfo = !this.showInfo;
        }
    }
}
</script>
<style scoped>

.header_search {
    /*width: 800px;*/
    margin: auto 10px;
}
/deep/ .header_search .ant-input-group .ant-input{
    height: 50px !important;
    line-height: 50px !important;
}
/deep/ .header_search .ant-input-group .ant-input-affix-wrapper{
    font-size: 20px;
}
/deep/ .header_search .ant-card-small > .ant-card-head{
    border-bottom: 1px solid #038181 !important;
}
/deep/ .header_search .ant-input-group .ant-input-group-addon{
    border-radius: 50px 0 0 50px !important;
}
/deep/ .header_search .ant-input-group .ant-input{
    border-radius:  0 50px 50px 0 !important;
}
/deep/ .header_search .ant-input-clear-icon{
    padding-right: 100px !important;
}
/deep/ .header_search .ant-input-affix-wrapper .ant-input{
  border-radius: 50px;
  height: 50px !important;
  padding-left: 20px;
}
/deep/ .header_search .ant-input-search-icon{
  font-size: 25px;
}

.pagCs{
    padding: 10px 0;
    text-align: center;
}
.bordc{
    border: 5px solid #9dfb76;
}
.spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
}
.bigd{
    font-size: 25px;
    color: rgba(0, 128, 128, 1);
}
.def{
    font-size: 18px;
    color: rgba(253, 128, 36, 1);
}

#components-back-top-demo-custom .ant-back-top {
    bottom: 100px;
    right: 20px;
}
#components-back-top-demo-custom .ant-back-top-inner {
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 4px;
    background-color: rgba(0, 128, 128, 1);
    color: #fff;
    text-align: center;
    font-size: 20px;
}
</style>